<template>
  <div>
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="mini">
        <el-option
          v-for="item in yearList"
          :key="item"
          :value="item"
          :label="`${item}年`"
        />
      </el-select>
      <el-select
        v-model="currentMonth"
        size="mini"
        style="margin-left: 20px;"
      >
        <el-option
          v-for="item in 12"
          :key="item"
          :label="`${item}月`"
          :value="item"
        />
      </el-select>
    </el-row>
    <el-calendar v-model="currentDate" class="calendar">
      <template #dateCell="{data, date}">
        <div class="day-container">
          <span>{{ data.day | showDay }}</span>
          <span v-if="isWeek(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'WorkCalendar',
  filters: {
    // 20222-01-07
    showDay(value) {
      // console.log(value)
      // 字符串转化成数组，以什么来分割
      // 2022-03-07 ==> ['2022', '03', '07']
      const currentDay = value.split('-').at(-1)
      return currentDay
    }
  },
  props: {
    // 如果父组件传递了时间，展示父组件的时间
    // 如果父组件没有传事件，展示当前最新的时间
    startDate: {
      type: Date,
      default: new Date()
    }
  },
  data() {
    return {
      // currentDate: null, // 当前的时间，日历组件根据这个时间会进行默认的展示
      currentMonth: null, // 当前的月份
      currentYear: null, // 当前的年份
      yearList: [] // 年份的下拉选择框
    }
  },
  computed: {
    currentDate() {
      return new Date(`${this.currentYear}-${this.currentMonth}-1`)
    }
  },
  created() {
  // 把初始的年份和月份获取到之后，赋值
    this.currentMonth = this.startDate.getMonth() + 1 // 默认获取到的月份是从0开始的
    this.currentYear = this.startDate.getFullYear() // 获取当前的年份

    // 根据this.currentYear向前推5年，向后5年
    // 。。 2021 2022 2023
    // 先构建一个11位的数组
    this.yearList = Array.from(Array(11), (item, index) => {
      return this.currentYear + index - 5
    })
  },
  methods: {
    // 判断是不是周末
    isWeek(date) {
      // console.log(date.getDay())
      return [0, 6].includes(date.getDay())
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-calendar__header {
  display: none;
}

.day-container {
  display: flex;
  justify-content: space-between;

  .rest {
    background: red;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }
}
</style>
